<template>
  <div>
    <h2>父组件</h2>
    <div>父组件收到:{{msg}}</div>
    <Child1 :getMsgFromChild1="getMsgFromChild1"></Child1>
<!--    <Child2 v-on:sendMsg = "getMsgFromChild2"></Child2>-->
    <Child2 @sendMsg = "getMsgFromChild2"></Child2>
    <Child3 ref="child3"></Child3>
  </div>
</template>

<script>
import Child1 from './Child1'
import Child2 from './Child2'
import Child3 from './Child3'

//子组件向父组件传递消息的方式1：通过props向子组件传递一个父组件带返回值的函数
//子组件向父组件传递消息的方式2：通过子组件的自定义事件的方式发送 $emit
//子组件向父组件传递消息的方式3：将方式2改为ref属性方式


export default {
  name: 'parent-component',
  data() {
    return {
      msg:''
    }
  },
  components:{
    Child1,
    Child2,
    Child3
  },
  methods:{
    getMsgFromChild1(value){
      this.msg = value
      return value
    },
    getMsgFromChild2(value){
      this.msg = value
    },
    getMsgFromChild3(value){
      this.msg = value
    }
  },
  mounted() {
    this.$refs.child3.$on('sendMsg2',this.getMsgFromChild3)
  }
}
</script>

<style>
</style>